<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <router-link to="/A">跳转到A</router-link>
  </div>
</template>

<script>
export default {
  name: "HelloWorld",
  data() {
    return {
      msg: "欢迎来到 VUE",
    };
  },
  created() {
    let url =
      "https://img1.baidu.com/it/u=1744783441,2528684541&fm=26&fmt=auto&gp=0.jpg";
    this.loadImage(url);
  },
  methods: {
    loadImage(url) {
      console.log(111);
      const promise = new Promise((resolve, reject) => {
        const img = document.createElement("img");
        img.onload = function () {
          resolve("成功获取图片", url);
        };
        img.onerror = function () {
          reject("获取图片失败", url);
        };
        img.src = url;
      })
        .then((data) => {
          //处理成功后的逻辑
          console.log(data, url); //这个data 是接收的resolve参数--
        })
        .catch((err) => {
          console.log(err, url);
        });
      return promise;
    },
  },
};
</script>

<style scoped>
h1,
h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>
